<template>
  <el-card>
    <el-button plain style="border:none" class="title-text">{{ blog.title }}</el-button>
    <el-row>
      <el-col :span="5">
        <el-button type="showText" plain icon="el-icon-user-solid" style="border:none">{{ blog.author }}</el-button>
      </el-col>
      <el-col :span="2">
        <el-button type="showText" plain icon="el-icon-view" style="border:none">{{ blog.clickCount }}</el-button>
      </el-col>
      <el-col :span="5">
        <el-button type="showText" plain icon="el-icon-time" style="border:none">{{ blog.updateTime|formatDate }}
        </el-button>
      </el-col>
    </el-row>
    <mavon-editor
      class="md"
      :value="blog.content"
      :subfield="prop.subfield"
      :defaultOpen="prop.defaultOpen"
      :toolbarsFlag="prop.toolbarsFlag"
      :editable="prop.editable"
      :scrollStyle="prop.scrollStyle"
      :boxShadow="prop.boxShadow"
    ></mavon-editor>
  </el-card>
</template>

<script>
import Vue from 'vue'
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
import {blogApi} from '@/api/BlogApi'

Vue.use(mavonEditor)
export default {
  created () {
    const blogId = this.$route.query.blogId
    blogApi.getBlogById({blogId: blogId}).then((res) => {
      if (this.$http.isSuccess(res)) {
        this.blog = res.data
      }
    }).catch(() => {
      this.$message.error('查询失败')
    })
  },
  data () {
    return {
      blog: {}
    }
  },
  methods: {},
  computed: {
    prop () {
      return {
        subfield: false, // 单双栏模式
        defaultOpen: 'preview', // edit： 默认展示编辑区域 ， preview： 默认展示预览区域
        editable: false,
        toolbarsFlag: false,
        boxShadow: false, // 关闭边框阴影
        scrollStyle: true
      }
    }
  }
}
</script>

<style>
.title-text {
  font-size: 30px;
  font-weight: bold;
  color: black;
}
</style>
